<template>
  <view class="Page home-app d-flex flex-column">
    <!-- 求职者端我的 -->
    <mineNavbar :styleData="styleData">
      <view class="babbarTop">
        <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/11/9cc83d89695f4b0abb5ac693d666be1f.png"
          style="width: 122rpx; height: 40rpx" />
      </view>
    </mineNavbar>
    <scroll-view class="scroll" scroll-y>
      <view class="mine">
        <view class="contain">
          <view class="t-card">
            <view class="top">
              <view class="leftBox">
                <view class="desc" v-if="userInfo.wxUserName">
                  {{ userInfo.wxUserName || "" }}
                </view>
                <view class="desc" v-else @click="handleGoLogin">
                  点击登陆
                </view>
                <view class="desc-1" v-if="userInfo.wxUserName" @click="handleGoLocation">
                  <text>{{ userInfo.storeName || "" }}</text>
                  <image src="../../../static/images/recruit/mine_10.png" mode="" />
                </view>
                <view class="desc-1" v-else>
                  <text>登录体验全部功能</text>
                </view>
              </view>
              <view class="rightBox">
                <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="chooseavatar">
                  <image class="" :src="userInfo.wxAvatar" mode="aspectFit|aspectFill|widthFix" lazy-load="false"
                    binderror="" bindload="" />
                </button>
                <view :class="
                  userInfo.verifyStatus === '1' ? 'realSty' : 'noRealSty'
                " @click.stop="handleGoreal">{{
  userInfo.verifyStatus === "1" ? "已实名" : "未实名"
}}</view>
              </view>
            </view>

            <view class="numP">
              <view @click="handleGoApply">
                <text class="position">投递/申请</text>
                <text class="number" v-if="userInfo.wxUserName">{{
                  getQuantitysInfo.applyForQuantity
                }}</text>
                <text v-else>--</text>
              </view>
              <view @click="handleGoCollection">
                <text class="position">收藏</text>
                <text class="number" v-if="userInfo.wxUserName">{{
                  getQuantitysInfo.collectQuantity
                }}</text>
                <text v-else>--</text>
              </view>
              <view @click="handleGohasCheck">
                <text class="position">我看过</text>
                <text class="number" v-if="userInfo.wxUserName">{{
                  getQuantitysInfo.myLookQuantity
                }}</text>
                <text v-else>--</text>
              </view>
              <view @click="handleGoCheckMine">
                <text class="position">看过我</text>
                <text class="number" v-if="userInfo.wxUserName">{{
                  getQuantitysInfo.lookMeQuantity
                }}</text>
                <text v-else>--</text>
              </view>
            </view>
          </view>

          <view class="vipBox">
            <view class="content">
              <view class="user" selectable="false" space="false" decode="false">
                每日签到获积分，兑好礼
              </view>

              <view class="look" @click="handleGoSign"> 去签到 </view>
            </view>
          </view>
        </view>

        <view class="middle-b">
          <view class="title"> 常用功能 </view>

          <view class="box">
            <view class="item" v-for="item in middleList" :key="item" @click="handlechangeRole(item)">
              <view class="imageIcon">
                <image class="imageIcon" :src="item.icon" mode="aspectFit|aspectFill|widthFix" lazy-load="false"
                  binderror="" bindload="" />
              </view>

              <text class="text">{{ item.name }}</text>
            </view>
          </view>
        </view>

        <view class="middle-b bottom">
          <view class="title"> 其他功能 </view>

          <view class="box">
            <view class="item" v-for="item in orderList" :key="item" style="width: 25%" @click="handlechangeRole(item)">
              <view class="imageIcon">
                <image class="imageIcon" :src="item.icon" mode="aspectFit|aspectFill|widthFix" lazy-load="false"
                  binderror="" bindload="" />
              </view>

              <text class="text">{{ item.name }}</text>
            </view>
          </view>
        </view>
        <view class="logOut" @click="handleLoginOut" v-if="userInfo.wxUserName">
          退出账号
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {
  getWxUserInfo,
  getQuantitys,
  exitUserInfo,
  getCode,
  getSiteStore,
  logout,
  xcxQhLogin,
} from "@/api/pages/mine.js";
import { getToken } from "@/utils/auth";
import config from "../../../../config";
export default {
  components: {},
  data() {
    return {
      styleData: {
        // tabbarText: "薪马马",
        background: "#fff6ea",
        TextColor: "#000000",
        show: false,
      },
      isRealName: false,
      middleList: [
        {
          name: "我的简历",
          icon: require("../../../static/images/recruit/mine.png"),
          topath: "/pages/recruit/mine/myResume/index",
        },
        {
          name: "我的钱包",
          icon: require("../../../static/images/recruit/mine_3.png"),
          topath: "/pages/recruit/mine/myWallet/index",
        },
        {
          name: "我的积分",
          icon: require("../../../static/images/recruit/mine_8.png"),
          topath: "/pages/recruit/mine/sign/index",
        },
      ],
      orderList: [
        {
          name: "关于我们",
          icon: require("../../../static/images/recruit/mine_1.png"),
          topath: "/pages/recruit/mine/aboutUs/index",
        },
        {
          name: "帮助文档",
          icon: require("../../../static/images/recruit/mine_4.png"),
          topath: "/pages/recruit/mine/help/index",
        },
        {
          name: "法务咨询",
          icon: require("../../../static/images/recruit/mine_6.png"),
          topath: "/pages/recruit/mine/low/index",
        },
        {
          name: "申请门店",
          icon: require("../../../static/images/recruit/mine_9.png"),
          topath: "/pages/recruit/mine/applyStore/index",
        },
        {
          name: "实名认证",
          icon: require("@/static/images/emterpriseMineImg/rc.png"),
          topath: "/pages/recruit/mine/verificationName/index",
        },
        {
          name: "切为招聘者",
          icon: require("../../../static/images/recruit/mine_5.png"),
        },

        // 占位
        {},
        {},
        {},
      ],
      userInfo: {
        wxUserName: "",
        wxAvatar: "",
        wxMobile: "",
        verifyStatus: "",
        storeName: "",
      }, // 用户信息
      getQuantitysInfo: {}, // 投递和收藏数量
    };
  },
  computed: {},
  // 监控data中的数据变化
  methods: {
    //获取用户信息
    getWXuserInfoFun() {
      getWxUserInfo().then((res) => {
        if (res.code === 200) {
          this.userInfo = res.data;
          console.log(this.userInfo.wxAvatar);
          this.getQuantitysFun();
        }
      });
    },
    // 获取用户是否存在门店二维码
    getCodeInfoFun() {
      getCode().then((res) => {
        if (res.code === 200) {
          if (!res.data) {
            if (this.orderList[4].name === '门店二维码') {
              console.log('门店二维码');
              this.orderList.splice(4, 1)
            }
          } else {
            if (this.orderList[4].name !== '门店二维码') {
              this.orderList.splice(4, 0,
                {
                  name: "门店二维码",
                  icon: require("../../../static/images/recruit/mine_7.png"),
                  topath: "/pages/recruit/mine/qrCode/index",
                },
              )
              uni.setStorageSync('codeInfo', JSON.stringify(res.data))
            }
          }
        } else {
          if (this.orderList[4].name === '门店二维码') {
            console.log('门店二维码');
            this.orderList.splice(4, 1)
          }
        }
      })
    },
    // 获取头像
    chooseavatar(e) {
      console.log(e);
      this.handleChangeAvatar(e.detail.avatarUrl)
      // this.userInfo.wxAvatar=e.detail.avatarUrl
    },
    // 更换头像
    handleChangeAvatar(tempFilePaths) {
      uni.uploadFile({
        url: config.baseUrl + "/xcx/common/upload",
        filePath: tempFilePaths,
        name: "file",
        header: {
          token: getToken(),
        },
        success: (suc) => {
          const infoData = JSON.parse(suc.data);
          exitUserInfo({
            wxAvatar: infoData.data.url,
          }).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.getWXuserInfoFun();
            }
          });
        },
        fail: (error) => {
          console.log("失败", error);
        },
      });
      // upload({ file: tempFilePaths }).then((res) => {
      // })
    },
    // 跳转实名验证
    handleGoreal() {
      uni.navigateTo({
        url: "/pages/recruit/mine/verificationName/index",
      });
    },
    //获取投递、收藏数量
    getQuantitysFun() {
      getQuantitys().then((res) => {
        console.log(res);
        this.getQuantitysInfo = res.data;
      });
    },
    // 跳转页面
    handleNavigeTo(url) {
      uni.navigateTo({ url });
    },
    async handlechangeRole(item) {
      if (item.name === "切为招聘者") {
        this.$store.commit("setUserType", "2");

        //切换登录
        if (getToken()) {
          const type = this.$store.state.userType;
          this.$store.dispatch("CutLogin", { type });
        }

        // 切换页面
        if (this.$store.state.userType === "1") {
          wx.setTabBarItem({
            index: 0,
            text: "首页",
            iconPath: "static/images/recruit/company-sele(1).png",
            selectedIconPath: "static/images/recruit/company-sele.png",
          });
          wx.setTabBarItem({
            index: 1,
            text: "岗位",
            iconPath: "static/images/recruit/company-sele(3).png",
            selectedIconPath: "static/images/recruit/company-sele(2).png",
          });
          wx.setTabBarItem({
            index: 2,
            text: "消息",
            iconPath: "static/images/recruit/company-sele(5).png",
            selectedIconPath: "static/images/recruit/company-sele(4).png",
          });
          wx.setTabBarItem({
            index: 3,
            text: "我的",
            iconPath: "static/images/recruit/company-sele(9).png",
            selectedIconPath: "static/images/recruit/company-sele(8).png",
          });
        } else {
          wx.setTabBarItem({
            index: 0,
            text: "首页",
            iconPath: "static/images/recruit/company-sele(1).png",
            selectedIconPath: "static/images/recruit/company-sele.png",
          });
          wx.setTabBarItem({
            index: 1,
            text: "人才",
            iconPath: "static/images/recruit/company-sele(7).png",
            selectedIconPath: "static/images/recruit/company-sele(6).png",
          });
          wx.setTabBarItem({
            index: 2,
            text: "岗位",
            iconPath: "static/images/recruit/company-sele(3).png",
            selectedIconPath: "static/images/recruit/company-sele(2).png",
          });
          wx.setTabBarItem({
            index: 3,
            text: "我的",
            iconPath: "static/images/recruit/company-sele(9).png",
            selectedIconPath: "static/images/recruit/company-sele(8).png",
          });
        }
      } else {
        if (item.name === "法务咨询") {
          uni.openCustomerServiceChat({
            extInfo: {
              url: "https://work.weixin.qq.com/kfid/kfcc768abd5fda6c86e",
            }, //客服跳转链接
            corpId: "wwbbe910ab168f836e", // 企业微信id
            success(res) {
              console.log(res);
            },
            fail(err) {
              console.log(err);
            },
          });
        } else {
          uni.navigateTo({
            url: item.topath,
          });
        }
      }
    },
    // 跳转登录页
    handleGoLogin() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "是否去登陆？",
        cancelText: "取消",
        confirmText: "确定",
        success: function (res) {
          if (res.confirm) {
            that.$store.dispatch("LogOut").then(() => {
              uni.navigateTo({
                url: "/pages/recruit/login/index",
              });
            });
          }
        },
      });
    },
    // 跳转登录页
    handleGoLogin() {
      this.handleNavigeTo("/pages/recruit/login/index");
    },
    // 跳转门店地图页
    handleGoLocation() {
      this.handleNavigeTo("/pages/recruit/post/mapLocation/index");
    },
    // 退出登陆
    handleLoginOut() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确定退出系统吗？",
        cancelText: "取消",
        confirmText: "确定",
        success: function (res) {
          if (res.confirm) {
            uni.setStorageSync('loginStatus', 0)
            that.$store.dispatch("LogOut").then(() => {
              that.isLogin = false;
              that.numDetails = null;
              that.userInfo = {
                wxUserId: "", // 求职者微信用户编号
                wxUserName: "", // 用户名
                wxAvatar: "", // 头像
                wxMobile: "", // 电话
                wxSex: "", // 性别（0男 1女 2未知）
                verifyStatus: "", // 实名认证状态 (0未实名 1已实名)
              };
              uni.navigateTo({
                url: "/pages/recruit/login/index",
              });
            });
          }
        },
      });
    },
    // 跳转签到页
    handleGoSign() {
      this.handleNavigeTo("/pages/recruit/mine/sign/index");
    },
    // 跳转我的投递申请页
    handleGoApply() {
      this.handleNavigeTo("/pages/recruit/mine/myApply/index");
    },
    // 跳转职位收藏
    handleGoCollection() {
      this.handleNavigeTo("/pages/recruit/mine/collection/index");
    },
    // 跳转我看过
    handleGohasCheck() {
      this.handleNavigeTo("/subPage/enterprise/mine/hasCheck/index");
    },
    // 跳转看过我
    handleGoCheckMine() {
      this.handleNavigeTo("/subPage/enterprise/mine/checkMe/index");
    },
    // 跳转实名验证页
    handleVerificationName() {
      this.handleNavigeTo("/pages/recruit/mine/verificationName/index");
    },
  },
  watch: {},
  onLoad(options) {
    this.getCodeInfoFun()
  },
  onShow() { },
  onReady() { },
  mounted() {
    this.getWXuserInfoFun();
    // this.getCodeInfoFun()
  },
};
</script>

<style lang="scss" scoped>
.Page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .babbarTop {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 32rpx;
  }
}

.scroll {
  flex: 1;
  overflow: hidden;

  .mine {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #f9f9f9;

    .contain {
      position: relative;
      background-color: #fff6ea;

      width: 100%;
      display: flex;
      justify-content: center;
      height: 350rpx;

      .t-card {
        position: absolute;
        border-radius: 24rpx;
        z-index: 10;
        width: 702rpx;
        height: 252rpx;
        background: #ffffff;

        .top {
          width: 702rpx;
          display: flex;

          justify-content: space-between;
          margin-top: 42rpx;

          .leftBox {
            margin-left: 32rpx;

            .desc {
              font-weight: 700;
              font-size: 36rpx;
              color: #000000e0;
              letter-spacing: 0;
              margin-left: 4rpx;
            }

            .desc-1 {
              font-weight: 700;
              font-size: 36rpx;
              color: #000000e0;
              letter-spacing: 0;

              >text {
                font-size: 24rpx;
                color: #00000073;
              }

              >image {
                width: 16rpx;
                height: 16rpx;
                margin-left: 5rpx;
              }
            }
          }

          .rightBox {
            margin-right: 32rpx;
            width: 92rpx;
            height: 90rpx;
            background-color: #504b45;
            border-radius: 50%;
            position: relative;

            .avatar-wrapper {
              width: 92rpx;
              height: 90rpx;
              border-radius: 50%;
              padding: 0;
            }

            image {
              width: 100%;
              height: 100%;
              border-radius: 92rpx;
            }

            >view {
              width: 80rpx;
              height: 32rpx;
              border-radius: 8rpx;
              line-height: 32rpx;
              text-align: center;
              position: absolute;
              left: 50%;
              bottom: -10rpx;
              transform: translateX(-50%);
              font-size: 18rpx;
              color: #000000a3;
              background: #f3f3f3;
            }

            .realSty {
              background: #ffebd1;
            }
          }
        }

        .numP {
          display: flex;
          justify-content: start;
          margin-top: 45rpx;
          width: 100%;
          margin-left: 32rpx;

          >view {
            margin-right: 50rpx;
          }

          .position {
            opacity: 0.64;

            font-weight: 500;
            font-size: 24rpx;
            color: #000000a3;
            letter-spacing: 0;
          }

          .number {
            font-weight: 700;
            font-size: 36rpx;
            color: #000000e0;
            letter-spacing: 0;
            margin-left: 10rpx;
          }

          .rog {}
        }
      }

      .vipBox {
        position: absolute;
        top: 158rpx;
        width: 702rpx;
        height: 189rpx;
        background-image: linear-gradient(180deg,
            #fcca87 0%,
            #ffe7c7 61%,
            #ffe7c7 100%);
        border-radius: 24rpx;
        z-index: 1;
        display: flex;
        align-items: flex-end;

        .content {
          display: flex;
          width: 702rpx;
          height: 95rpx;
          align-items: center;
          justify-content: space-between;
          background-image: linear-gradient(180deg,
              #fcca87 0%,
              #ffe7c7 61%,
              #ffe7c7 100%);

          .image {
            padding-left: 10rpx;
            width: 40rpx;
            height: 40rpx;
          }

          .user {
            height: 40rpx;
            line-height: 40rpx;

            font-weight: 600;
            font-size: 28rpx;
            color: #7e4800;
            margin-left: 32rpx;
          }

          .look {
            width: 145rpx;
            height: 55rpx;
            line-height: 56rpx;
            border: 1rpx solid #fff0db;
            border-radius: 28rpx;
            background-color: #fff0db;

            font-weight: 600;
            font-size: 24rpx;
            color: #a56e2a;
            text-align: center;
            margin-right: 32rpx;
          }
        }
      }
    }

    .middle-b {
      width: 702rpx;
      height: 252rpx;
      background: #ffffff;
      border-radius: 24rpx;
      margin-top: 24rpx;

      .title {
        padding-top: 24rpx;
        padding-left: 32rpx;
        font-weight: 700;
        font-size: 28rpx;
        color: #000000;
        letter-spacing: 0;
      }

      .imageIcon {
        width: 56rpx;
        height: 56rpx;
        margin-bottom: 16rpx;
      }

      .box {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top: 45rpx;

        .item {
          width: 33.3%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-bottom: 58rpx;
        }

        .text {
          font-weight: 500;
          font-size: 24rpx;
          color: #000000;
          opacity: 0.64;
        }
      }
    }

    .bottom {
      height: 418rpx;
    }

    .logOut {
      padding-top: 40rpx;
      padding-bottom: 80rpx;
      width: 96rpx;
      height: 33rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #00000073;
      letter-spacing: 0;
      text-align: center;
    }
  }
}
</style>
